<template>
  <view class="choose-category app-container">
    <view class="content flex-1">
      <scroll-view scroll-y style="height: 100%">
        <view class="p-20" v-if="subjectList.length">
          <view class="bg-white" style="border-radius: 20rpx">
            <up-checkbox-group
              v-model="checkedList"
              iconPlacement="right"
              placement="column"
            >
              <view
                class="checkbox-wrapper"
                v-for="item in subjectList"
                :key="item.id"
              >
                <up-checkbox
                  :name="item.id"
                  :label="item.name"
                  :labelDisabled="false"
                >
                  <template #label>
                    <view class="flex justify-between items-center">
                      <up-image
                        v-if="item.image_url"
                        :src="item.image_url"
                        width="50"
                        height="50"
                        shape="circle"
                      ></up-image>
                      <view class="ml-20">{{ item.name }}</view>
                    </view>
                  </template>
                </up-checkbox>
              </view>
            </up-checkbox-group>
          </view>
        </view>
        <my-empty v-else></my-empty>
      </scroll-view>
    </view>
    <view class="actions">
      <u-button type="primary" shape="circle" @click="confirmChecked">{{
        checkedList.length ? `确认（已选${checkedList.length}项）` : "确认"
      }}</u-button>
    </view>
  </view>
</template>

<script setup>
import { getSubjectList } from "@/common/apis/goods.js";
import { onShow } from "@dcloudio/uni-app";
import { ref, computed } from "vue";

const props = defineProps({
  subjects: {
    type: String,
    default: "[]",
  },
});

const subjectList = ref([]);

const checkedList = ref(JSON.parse(props.subjects));

const formatCheckedLabel = computed(() => {
  let label = "";
  checkedList.value.forEach((item, index) => {
    const subject = subjectList.value.find((subject) => subject.id === item);
    if (subject) {
      label += subject.name;
      if (index !== checkedList.value.length - 1) {
        label += "、";
      }
    }
  });
  return label;
});

async function fetchSubjectList() {
  const response = await getSubjectList();
  if (response) {
    subjectList.value = response;
  }
}

function confirmChecked() {
  if (checkedList.value.length < 5) {
    uni.$u.toast("请至少选择5个类目");
  } else {
    uni.$emit("chooseSubjects", checkedList.value, formatCheckedLabel.value);
    uni.navigateBack();
  }
}

onShow(async () => {
  await fetchSubjectList();
});
</script>

<style scoped lang="scss">
.search {
  box-sizing: border-box;
  position: fixed;
  left: 0;
  // #ifdef H5
  top: 44px;
  // #endif
  // #ifndef H5
  top: 0;
  // #endif
  z-index: 100;
  width: 100%;
}

.content {
  padding-bottom: 200rpx;
}

.checkbox-wrapper {
  padding: 20rpx;
  border-bottom: 1px #ccc solid;
}

.actions {
  padding: 40rpx;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 100;
  box-sizing: border-box;
}
</style>
